<template>
    <el-row :gutter="20">
        <!-- 设备分类的树 -->
        <el-col :span="4" :xs="24">
            <div>
                <el-input v-model="filterCategoryName"
                          placeholder="请输入分类名称"
                          clearable
                          size="small"
                          prefix-icon="el-icon-search"
                          style="margin-bottom: 20px">
                </el-input>
                <el-tree ref="categoryTree"
                         :data="categoryTreeData" :props="categoryTreeProps"
                         :show-checkbox="false"
                         :default-expand-all="true"
                         @node-click="selectCategoryDevice"
                         :filter-node-method="filterNode">
                </el-tree>
            </div>
        </el-col>
        <!-- 设备列表 -->
        <el-col :span="20" :xs="24">
            <div>
                <!-- 新增 -->
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus"
                                   @click="handleAddDevice">新增
                        </el-button>
                    </el-col>
                </el-row>
                <!-- 查询结果列表 -->
                <el-table :data="deviceListData"
                          style="width: 100%">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="设备名称" align="center" prop="deviceName"/>
                    <el-table-column label="设备编号" align="center" prop="deviceCode" width="180px"/>
                    <el-table-column label="经度" align="center" prop="lng" width="150px"/>
                    <el-table-column label="纬度" align="center" prop="lat" width="150px"/>
                    <el-table-column label="所属分类" align="center" prop="categoryName"/>
                    <el-table-column label="驱动名称" align="center" prop="driverName"/>
                    <el-table-column label="设备状态" align="center">
                        <template v-slot="scope">
                            <span v-if="scope.row.status == 1" style="color: #0d84ff;font-size: 18px;">在线</span>
                            <span v-if="scope.row.status == 0">离线</span>
                            <!--                            <el-select disabled v-model="scope.row.status">-->
                            <!--                                <el-option-->
                            <!--                                        v-for="dict in deviceStatusOptions"-->
                            <!--                                        :key="dict.dictValue"-->
                            <!--                                        :label="dict.dictLabel"-->
                            <!--                                        :value="dict.dictValue"-->
                            <!--                                ></el-option>-->
                            <!--                            </el-select>-->
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" min-width="160px" align="center" prop="createTime"/>
                    <el-table-column label="操作" align="center" width="290px">
                        <template v-slot="scope">
                            <el-button icon="el-icon-position"
                                       @click="handleSendInstruction(scope.row)">指令下发
                            </el-button>
                            <el-button icon="el-icon-edit"
                                       @click="handleUpdateDevice(scope.row)">修改
                            </el-button>
                            <el-button icon="el-icon-delete"
                                       @click="handleDeleteDevice(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination align="center" :page-sizes="[10, 20, 50, 100]"
                               layout="sizes,prev, pager, next, jumper"
                               :total="deviceListTotal"
                               :page-size="queryParams.pageSize"
                               :current-page="queryParams.pageNum"
                               @current-change="handleDeviceListChange"
                               @size-change="handleSizeChange"
                               prev-text="上一页" next-text="下一页"
                               :hide-on-single-page="true">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    <!--  增加或修改设备信息 -->
    <update-device :title="title" :form="form" :open="open"
                   :category-tree-data="categoryTreeData"
                   v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-device>
    <!-- 下发指令 -->
    <send-instruction :title="sendInstructionTitle" :client-id="sendInstructionClientId"
                      :open="sendInstructionOpen"
                      v-on:dialogStatusChanged="changeDialogStatus($event)">
    </send-instruction>
</template>

<script>
    import {listCategory} from '/src/api/device/category'
    import {listDevice, deleteDevice} from '/src/api/device/manage'
    import updateDevice from './update.vue'
    import sendInstruction from './sendInstruction.vue'

    export default {
        name: "index",
        components: {updateDevice, sendInstruction},
        data() {
            return {
                filterCategoryName: '',
                categoryTreeData: [],
                categoryTreeProps: {
                    children: 'children',
                    label: 'categoryName'
                },
                deviceListData: [],
                deviceListTotal: 0,
                dateRange: [],
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    categoryId: undefined,
                },
                //新增或修改的弹出框
                open: false,
                //弹出框标题
                title: '',
                //新增或修改时的form对象
                form: {},
                //设备状态
                deviceStatusOptions: [],
                //发送指令
                sendInstructionOpen: false,
                sendInstructionTitle: '',
                sendInstructionClientId: '',
            }
        },
        watch: {
            filterCategoryName(val) {
                this.$refs.categoryTree.filter(val);
            }
        },
        created() {
            this.getDicts("device_status").then(response => {
                this.deviceStatusOptions = response.data;
            });
            this.categoryTreeSelect()
            this.getDeviceListByParam()
        },
        methods: {
            //获取设备列表
            getDeviceListByParam() {
                listDevice(this.addDateRange(this.queryParams, this.dateRange)).then((res) => {
                    this.deviceListData = res.rows
                    this.deviceListTotal = res.total
                })
            },
            //获取分类树
            categoryTreeSelect() {
                listCategory().then((res) => {
                    this.categoryTreeData = res.data
                })
            },
            //过滤分类树
            filterNode(value, data) {
                if (!value) return true;
                return data.categoryName.indexOf(value) !== -1;
            },
            //分页 页码改变事件
            handleDeviceListChange: function (currentPageNum) {
                this.queryParams.pageNum = currentPageNum
                this.getDeviceListByParam()
            },
            //分页 页码条数改变事件
            handleSizeChange: function (currentPageSize) {
                this.queryParams.pageSize = currentPageSize
                this.getDeviceListByParam()
            },
            //根据分类id查询其下的设备
            selectCategoryDevice(data) {
                this.queryParams.pageNum = 1
                this.queryParams.categoryId = data.categoryId;
                this.getDeviceListByParam()
            },
            //根据条件查询设备
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getDeviceListByParam()
            },
            //修改设备事件
            handleUpdateDevice(row) {
                this.form = row
                this.title = "修改设备信息"
                this.open = true
            },
            //删除设备
            handleDeleteDevice(row) {
                this.$confirm('是否确认删除名称为"' + row.deviceName + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteDevice(row.deviceId);
                }).then(() => {
                    this.getDeviceListByParam();
                    this.msgSuccess("删除成功");
                })
            },
            //新增设备
            handleAddDevice() {
                this.form = {}
                this.title = "新增设备信息"
                this.open = true
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.sendInstructionOpen = status
                this.getDeviceListByParam()
            },
            handleSendInstruction(row) {
                this.sendInstructionClientId = row.deviceCode
                this.sendInstructionTitle = "下发设备指令信息"
                this.sendInstructionOpen = true
            }
        }
    }
</script>

<style scoped>

</style>
